<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}" href="../../static/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/testbook.css}" href="../../static/css/testbook.css"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css//bootstrap-datetimepicker.min.css}" href="../../static/css/bootstrap-datetimepicker.min.css"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.9.0.min.js}" src="../../static/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}" src="../../static/js/bootstrap.min.js"></script>
    <script type="text/javascript" th:src="@{/js/moment-with-locales.js}" src="../../static/js/moment-with-locales.js"></script>
    <script type="text/javascript" th:src="@{/js/bootstrap-datetimepicker.min.js}" src="../../static/js/bootstrap-datetimepicker.min.js"></script>
    <script>
        $('#startTime').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });
        $('#endTime').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });
        $('#publishDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });
        $('#editPublishDate').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            defaultDate: "1990-1-1"
        });
        $(function () {
            $('#endTime').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $('#publishDate').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });

            $('#editPublishDate').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $('#startTime').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
        });
        var closeDialog = function () {
            $('#exampleModal').modal('hide');
            $("#code").val("");
            $("#name").val("");
            $("#author").val("");
            $("#publishDateInput").val("");
        };
        //   var showDialog = function () {
        //       $('#exampleModal').modal('show');
        //       $('#code').attr("readonly",true);
        //       $('#exampleModalLabel').text("修改書本")
        //   };
        //   setTimeout(function (){
        //       $('#reset').click();
        //   },500);
    </script>
</head>
<body>
<div class="container-fluid">
    <h1><span class="glyphicon glyphicon-book"></span>《圖書管理》</h1>
    <hr>
    <div class="search-bar">
        <form action="#" method="post" class="form-inline" id="searchForm">
            <div class="form-group">
                <label for="codeSearch">代碼</label>
                <input type="text" id="codeSearch" placeholder="請輪入書籍代碼" class="form-control"/>
            </div>
            <div class="form-group">
                <label for="nameSearch">書名</label>
                <input type="text" id="nameSearch" placeholder="請輪入書名" class="form-control"/>
            </div>
            <div class="form-group">
                <label for="authorSearch">作者</label>
                <input type="text" id="authorSearch" placeholder="請輪入作者" class="form-control"/>
            </div>
            <label for="startTime">出版日期</label>
            <div class="form-group">
                <div class='input-group' id='startTime'>
                    <input type='text' class="form-control" placeholder="开始日期" id = "sTime"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <label for="endTime">至</label>
            <div class="form-group">
                <div class='input-group' id='endTime'>
                    <input type='text' class="form-control" placeholder="结束日期" id = "eTime"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <!--                <button type="submit" class="btn btn-primary" id="search">查詢</button>-->
                <input type="button" class="btn btn-primary active" id="search" value="查询">
                <button type="reset" class="btn btn-default" id="reset">重置</button>
                <button type="button" class="btn btn-warning" id="insertDialog" data-toggle="modal" data-target="#exampleModal">新增</button>
            </div>
        </form>
    </div>
    <div id="book_page" class="showTable">
        <div  th:fragment="page">
            <form action="#" method="post">
                <table class="table table-bordered table-hover"><!-- th:fragment="book_page" -->
                    <tr class="active">
                        <th>ID</th>
                        <th>代碼</th>
                        <th>名稱</th>
                        <th>作者</th>
                        <th>出版日期</th>
                        <th>創建時間</th>
                        <th>更新時間</th>
                        <th>操作</th>
                    </tr>
                    <tr th:each="bookList : ${page.list}" th:id="${'row-' + bookList.id}">
                        <td th:text="${bookList.id}">01</td>
                        <td th:text="${bookList.code}">A001</td>
                        <td th:text="${bookList.name}">西游记</td>
                        <td th:text="${bookList.author}">吴承恩</td>
                        <td th:text="${bookList.publishDate}">2020-10-10</td>
                        <td th:text="${bookList.createTime}">2024-10-10</td>
                        <td th:text="${bookList.updateTime}">2024-10-10</td>
                        <td><a class="editBtn" data-toggle="modal" data-target="#editModal">编辑</a></td>
                    </tr>
                </table>
                <div style="overflow: hidden">
                    <style>
                        .page{
                            border: 1px solid blue;
                            margin-right: 5px;
                            padding: 3px 5px;
                        }
                        .page.active{
                            color: red;
                            border: 1px solid red;
                        }
                    </style>
                    <div style="float: left">
                        当前第<span th:text="${page.pageNum}"></span>页
                        总记录数<span th:text="${page.total}"></span>
                    </div>
                    <div style="float: right">
                        <a th:text="首页" th:if="${page.pageNum>1}" th:href="@{${path}}" class="ajax-link"></a>
                        <a th:text="上一页" th:if="${page.pageNum>1}" th:href="@{${path}+${page.pageNum-1}}" class="ajax-link"></a>
                        <a th:href="@{${path}+${i}}" th:each="i:${#numbers.sequence(1,page.pages)}" th:text="${i}"
                           class="ajax-link"
                           th:class="${page.pageNum==i}? 'page active':'page'"></a>
                        <a th:text="下一页" th:if="${page.pageNum<page.pages}" th:href="@{${path}+${page.pageNum+1}}" class="ajax-link"></a>
                        <a th:text="尾页" th:if="${page.pageNum<page.pages}" th:href="@{${path}+${page.pages}}" class="ajax-link"></a>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="#" method="post">
                    <div class="modal-header">
                        <h3 class="modal-title" id="exampleModalLabel" value="">新增圖書</h3>
                    </div>
                    <div class="modal-body">
                        <span id="feedback1"></span>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label for="name">代碼</label>
                                    <input type="text" class="form-control" id="code" placeholder="請輸入完整代碼">
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label for="name">書名</label>
                                    <input type="text" class="form-control" id="name" placeholder="請輸入書名">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label for="name">作者</label>
                                    <input type="text" class="form-control" id="author" placeholder="請輸入作者">
                                </div>
                            </div>

                            <div class="col-xs-6">
                                <label for="publishDate">出版日期</label>
                                <div class="form-group">
                                    <div class='input-group' id='publishDate'>
                                        <input type='text' class="form-control" placeholder="出版日期" id="publishDateInput"/>
                                        <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelInsert">取消</button>
                        <!--    <button type="submit" class="btn btn-primary" id="submitInsert">保存</button>   -->
                        <input type="button" class="btn btn-primary active" id="submitInsert" value="保存">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="#" method="post">
                    <div class="modal-header">
                        <h3 class="modal-title" id="editModalLabel" value="">編輯圖書</h3>
                    </div>
                    <div class="modal-body">
                        <span id="feedback2"></span>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label for="editCode">代碼</label>
                                    <input type="text" class="form-control" id="editCode" placeholder="請輸入完整代碼">
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label for="editName">書名</label>
                                    <input type="text" class="form-control" id="editName" placeholder="請輸入書名">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group">
                                    <label for="editAuthor">作者</label>
                                    <input type="text" class="form-control" id="editAuthor" placeholder="請輸入作者">
                                </div>
                            </div>

                            <div class="col-xs-6">
                                <label for="editPublishDate">出版日期</label>
                                <div class="form-group">
                                    <div class='input-group' id='editPublishDate'>
                                        <input type='text' class="form-control" placeholder="出版日期" id="editPublishDateInput"/>
                                        <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal" id="cancelEdit">取消</button>
                        <!--    <button type="submit" class="btn btn-primary" id="submitInsert">保存</button>   -->
                        <input type="button" class="btn btn-primary active" id="submitEdit" value="保存">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $("#reset").on("click", function (event) {
        event.preventDefault();
        $("#codeSearch").val("");
        $("#nameSearch").val("");
        $("#authorSearch").val("");
        $("#startTime").data("DateTimePicker").clear();
        $("#endTime").data("DateTimePicker").clear();
        $("#publishDate").data("DateTimePicker").clear();
        $("#search").click();
    });
    $("#cancelInsert").on("click",function (event){
        event.preventDefault();
        $("#exampleModal").modal("hide");
        $("#code").val("");
        $("#name").val("");
        $("#author").val("");
        $("#publishDateInput").val("");
        $("#search").click();
    });
    $("#insertDialog").on("click",function (event){
        event.preventDefault();
        $('#code').attr("readonly",false);
        $('#exampleModalLabel').text("新增書本")
        $("#code").val("");
        $("#name").val("");
        $("#author").val("");
        $("#publishDateInput").val("");
    });
    $("#search").on("click",function(event){
        search();
    });
    $("#submitInsert").on("click",function(event){
        insert();
    });
    $(".editBtn").on("click",function(event){
        editBook();
    });

    var loadPage = function(){
        $.ajax({
            type : 'GET',
            url : '/fesp_ext/testbook.do/load',
            dataType: "html",
            data : pageIndex,
            success : function(data) {
                //console.log("接收到:"+data);
                $("#book_page").html(data);
            }
        });
    };
    var search = function (){
        var dataObj = {
            code: $("#codeSearch").val(),
            name: $("#nameSearch").val(),
            author: $("#authorSearch").val(),
            startTime: $("#sTime").val(),
            endTime: $("#eTime").val()

        };
        //console.log("发送"+dataObj);
        $.ajax({
            type : 'POST',
            url : '/fesp_ext/testbook.do/search',
            data : JSON.stringify(dataObj),
            contentType: "application/json; charset=utf-8",
            dataType: "html",
            success : function (data) {
                console.log(data);
                //loadPage();
                $("#book_page").empty().html(data);
                //location.reload(true);
            },
            error: function (xhr, status, error) {
                console.error("Error:", xhr.responseText);
            }
        });
    };
    var insert = function(){
        var newData = {
            code: $("#code").val(),
            name: $("#name").val(),
            author: $("#author").val(),
            publishDate: $("#publishDateInput").val()
        };
        //console.log("发送"+newData);
        $.ajax({
            type : 'POST',
            url : '/fesp_ext/testbook.do/insert',
            data : JSON.stringify(newData),
            dataType: "html",
            contentType: "application/json; charset=utf-8",
            success : function (data) {
                loadPage();
                alert("添加成功");
                closeDialog();
                //location.reload(true);
            },
            error: function (xhr, status, error) {
                console.error("Error:", xhr.responseText);
            }
        });
    };

    function editBook() {
        var data = $(this).data();
        console.log(data);
    };
</script>
</body>
</html>